HTML Versions and Graceful Degradation

In days gone by we would strive to write accurate HTML, validate the markup and wear the 'W3C Validation Icon' on our page. We would know that our code was standards-compliant and so any browser should display the page as was intended. The problem is, not all web browsers are standards-compliant. This is not such an issue these days. Modern browsers comply with the latest standards and implement additional experimental features too. The main problem web developers had to work around was Microsoft Internet Explorer which was notorious for doing things it's own way and, having the biggest market share of browsers!

Differences Between HTML 4.01 and XHTML 1.1

HTML 4.01Valid HTML 4.01 Transitional XHTML 1.1Valid XHTML 1.1 Comments
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> The 'Document Type Definition' (DTD).
<html lang="en"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> XHTML requires a full 'XML NameSpace' and the lang attribute needs to be prefixed.
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> META tags are self-closing in HTML but must be closed in XML. Also, the 'Content-Type' should reflect the actual document content type.
<title>My App</title> <title>My App</title>
<link rel="stylesheet" type="text/css" href="MyStyle.css"> <link rel="stylesheet" type="text/css" href="MyStyle.css" /> LINK tags are self-closing in HTML but must be closed in XML.
<style type="text/css"> <style type="text/css">/*<![CDATA[*/ CSS is not valid XML so must be enclosed in 'CDATA' tags.
body { body {
font-family: Calibri, Verdana, Helvetica, sans-serif; font-family: Calibri, Verdana, Helvetica, sans-serif;
} }
</style> /*]]>*/</style>
<script type="text/javascript"> <script type="text/javascript"><![CDATA[ JavaScript is not valid XML so must be enclosed in 'CDATA' tags.
addEvent(window, "DOMContentLoaded", init); addEvent(window, "DOMContentLoaded", init);
</script> ]]></script>
</head> </head>
<body> <body>
<div class="header"> <div class="header">
<img class="logo" src="assets/img/logo.png" alt="MyCompany"> <img class="logo" src="assets/img/logo.png" alt="MyCompany" /> IMG tags are self-closing in HTML but must be closed in XML.
<div class="nav"> <div class="nav">
<ul> <ul>
<li><a href="settings.html">Settings</a></li> <li><a href="settings.html">Settings</a></li>
<li><a href="account.html">Account</a></li> <li><a href="account.html">Account</a></li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="aside"> <div class="aside">
<div class="nav"></div> <div class="nav"></div>
</div> </div>
<div class="main"> <div class="main">
<div class="nav"> <div class="nav">
<ul> <ul>
<li><a href="/">/</a></li> <li><a href="/">/</a></li>
</ul> </ul>
</div> </div>
<h1>My App</h1> <h1>My App</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div> </div>
<div class="footer"> <div class="footer">
<div class="nav"> <div class="nav">
<ul> <ul>
<li><a href="about.html">About Us</a></li> <li><a href="about.html">About Us</a></li>
<li><a href="vacancies.html">Job Vacancies</a></li> <li><a href="vacancies.html">Job Vacancies</a></li>
<li><a href="contact.html">Contact Us</a></li> <li><a href="contact.html">Contact Us</a></li>
</ul> </ul>
</div> </div>
</div> </div>
</body> </body>
</html> </html>

Differences Between HTML 4.01 and HTML 5

HTML 4.01Valid HTML 4.01 Transitional HTML 5HTML5 Powered Comments
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE html> HTML 5 doesn't have a 'DTD'
<html lang="en"> <html lang="en">
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="UTF-8"> HTML 5 has a new META 'charset' attribute.
<title>My App</title> <title>My App</title>
<link rel="stylesheet" type="text/css" href="MyStyle.css"> <link rel="stylesheet" href="MyStyle.css" />
<style type="text/css"> <style> HTML 5 does not require (and shouldn't have) a STYLE 'type' attribute.
body { body {
font-family: Calibri, Verdana, Helvetica, sans-serif; font-family: Calibri, Verdana, Helvetica, sans-serif;
} }
</style> </style>
<script type="text/javascript"> <script> HTML 5 does not require (and shouldn't have) a SCRIPT 'type' attribute.
addEvent(window, "DOMContentLoaded", init); addEvent(window, "DOMContentLoaded", init);
</script> </script>
</head> </head>
<body> <body>
<div class="header"> <header> HTML 5 has a new HEADER element. It is possible to use the ARIA 'banner' role.
<img class="logo" src="assets/img/logo.png" alt="MyCompany"> <img class="logo" src="assets/img/logo.png" alt="MyCompany">
<div class="nav"> <nav> HTML 5 has a new NAV element. It is possible to use the ARIA 'navigation' role.
<ul> <ul>
<li><a href="settings.html">Settings</a></li> <li><a href="settings.html">Settings</a></li>
<li><a href="account.html">Account</a></li> <li><a href="account.html">Account</a></li>
</ul> </ul>
</div> </nav>
</div> </header>
<div class="aside"> <aside> HTML 5 has a new ASIDE element. It is possible to use the ARIA 'complementary' role.
<div class="nav"></div> <nav></nav>
</div> </aside>
<div class="main"> <main> HTML 5 has a new MAIN element. It is possible to use the ARIA 'main' role.
<div class="nav"> <nav>
<ul> <ul>
<li><a href="/">/</a></li> <li><a href="/">/</a></li>
</ul> </ul>
</div> </nav>
<h1>My App</h1> <h1>My App</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div> </main>
<div class="footer"> <footer> HTML 5 has a new FOOTER element. It is possible to use the ARIA 'contentinfo' role.
<div class="nav"> <nav>
<ul> <ul>
<li><a href="about.html">About Us</a></li> <li><a href="about.html">About Us</a></li>
<li><a href="vacancies.html">Job Vacancies</a></li> <li><a href="vacancies.html">Job Vacancies</a></li>
<li><a href="contact.html">Contact Us</a></li> <li><a href="contact.html">Contact Us</a></li>
</ul> </ul>
</div> </nav>
</div> </footer>
</body> </body>
</html> </html>

XHTML5

XML documents must be served with an XML Internet media type (often called "MIME type") such as application/xhtml+xml or application/xml,[102] and must conform to strict, well-formed syntax of XML. XHTML5 is simply XML-serialized HTML5 data (...), sent with one of XML media types.

HTML that has been written to conform to both the HTML and XHTML specifications and therefore produces the same DOM tree whether parsed as HTML or XML is known as polyglot markup.

Markup Comments
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My App</title>
<link rel="stylesheet" href="MyStyle.css" />
<style type="text/css">/*<![CDATA[*/
body {
font-family: Calibri, Verdana, Helvetica, sans-serif;
}
/*]]>*/</style>
<script type="text/javascript"><![CDATA[
addEvent(window, "DOMContentLoaded", init);
]]></script>
</head>
<body>
<header>
<img class="logo" src="assets/img/logo.png" alt="MyCompany" />
<nav>
<ul>
<li><a href="settings.html">Settings</a></li>
<li><a href="account.html">Account</a></li>
</ul>
</nav>
</header>
<aside>
<nav></nav>
</aside>
<main>
<nav>
<ul>
<li><a href="/">/</a></li>
</ul>
</nav>
<h1>My App</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</main>
<footer>
<nav>
<ul>
<li><a href="about.html">About Us</a></li>
<li><a href="vacancies.html">Job Vacancies</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</nav>
</footer>
</body>
</html>

Graceful Degradation

Markup Comments
<!DOCTYPE html>
<html lang="en" xml:lang="en"> HTML and XML 'lang' attributes.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> Valid XML.
<title>My App</title>
<link rel="stylesheet" href="MyStyle.css" /> Valid XML
<style type="text/css"><!--/*--><![CDATA[/*><!--*/ Backwards Compatible*.
No support for style, script, or marked sections.
body {
font-family: Calibri, Verdana, Helvetica, sans-serif;
}
/*]]>*/--></style>
<script type="text/javascript"><!--//--><![CDATA[//><!-- Backwards Compatible*.
No support for style, script, or marked sections.
addEvent(window, "DOMContentLoaded", init);
//--><!]]></script>
</head>
<body>
<header role="banner"> Backwards Compatible*
<img class="logo" src="assets/img/logo.png" alt="MyCompany" /> Valid XML.
<nav role="navigation"> Backwards Compatible*
<ul>
<li><a href="settings.html">Settings</a></li>
<li><a href="account.html">Account</a></li>
</ul>
</nav>
</header>
<aside role="complementary"> Backwards Compatible*
<nav role="navigation"></nav>
</aside>
<main role="main"> Backwards Compatible*
<nav>
<ul>
<li><a href="/">/</a></li>
</ul>
</nav>
<h1>My App</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</main>
<footer role="contentinfo"> Backwards Compatible*
<nav role="navigation">
<ul>
<li><a href="about.html">About Us</a></li>
<li><a href="vacancies.html">Job Vacancies</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</nav>
</footer>
</body>
</html>

Sample Code

Further Reading